<!-- 考试模块-在线考试 -->
<template>
  <page-layout>
    <!-- 列表页面 -->
    <a-row :gutter="[10, 10]">
      <!-- 查询条件 -->
      <a-col :span="24">
        <a-card>
          <pro-query
            :searchParam="searchParam"
            @on-search="search"
          >
            <template #test="{ data }">
              <a-input v-model:value="data.test" type="text"/>
            </template>
          </pro-query>
        </a-card>
      </a-col>
      <!-- 用户列表 -->
      <a-col :span="24">
        <a-card>
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :toolbar="toolbar"
            :operate="operate"
            :param="state.param"
            :pagination="pagination">
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
  <a-modal v-model:visible="visible" title="题目详情" @ok="handleOk" :footer="null">
    <a-card>
      <p v-if="quData.quType ===1">
        【单选题】{{ quData.content }}
      </p>
      <p v-else-if="quData.quType === 2">
        【多选题】{{ quData.content }}
      </p>
      <p v-else-if="quData.quType === 3">
        【判断题】{{ quData.content }}
      </p>
      <div v-if="quData.quType === 1 ">
        <a-radio-group v-model:value="radioValues">
          <a-radio v-for="an in quData.answerList" :key="an" :value="an.id" disabled>{{ an.content }}</a-radio>
        </a-radio-group>
      </div>
      <!-- 多选题 -->
      <div v-if="quData.quType === 2">
        <a-checkbox-group v-model:value="multiValues">
          <a-checkbox v-for="an in quData.answerList" :key="an" :value="an.id" disabled>{{ an.content }}</a-checkbox>
        </a-checkbox-group>
      </div>
      <div v-if=" quData.quType === 3 ">
        <a-radio-group v-model:value="judgeValues">
          <a-radio v-for="an in quData.answerList" :key="an" :value="an.id" disabled>{{ an.content }}</a-radio>
        </a-radio-group>
      </div>
    </a-card>
    <a-divider />
    <a-card>
      <h3><b>整题解析：</b></h3>
      <p>{{ quData.analysis }}</p>
      <p v-if="!quData.analysis">暂无解析内容！</p>
    </a-card>
    <a-divider />
    <a-card >
      <h3><b>选项解析：</b></h3>
      <template v-for="an in quData.answerList" >
        <div :key="an" v-if="an.analysis" class="qu-analysis-line">
          <p style="color: #555;">{{ an.content }}：</p>
          <p style="color: #1890ff;">{{ an.analysis }}</p>
        </div>
      </template>
      <p v-if="analysisCount === 0">暂无选项解析</p>

    </a-card>
  </a-modal>
</template>

<script>
import {bookPaging, quQuDetail} from "@/api/module/exam.js";
import {defineComponent, reactive, ref} from 'vue';
import {useRoute} from 'vue-router';
import router from "@/route";

export default defineComponent({

  setup() {
    const tableRef = ref();
    const quData = ref({});
    const routers = useRoute();
    const examId = JSON.parse(routers.query.id);
    const radioValues = ref('');
    const judgeValues = ref('');
    const multiValues = ref([]);
    const analysisCount = ref(0);


    const visible = ref(false);

    const handleOk = e => {
      console.log(e);
      visible.value = false;
    };
    const showModal = () => {
      visible.value = true;
    };
    /// 查询用户
    const fetch = async (param) => {
      param.examId = examId
      console.log("参数++", param)
      var response = await bookPaging(param);
      return {
        total: response.data.total,
        data: response.data.records,
      };
    };

    /// 行操作
    const operate = [{
      label: "查看解析", event: function (record) {
        console.log(visible.value)
        const param = {
          id: record.quId,
        }
        quQuDetail(param).then((response) => {
          console.log("详情列表+", response.data)
          quData.value = response.data

          quData.value.answerList.forEach((an) => {
            // 解析数量
            if (an.analysis) {
              analysisCount.value += 1
            }

            // 用户选定的
            if (an.isRight) {
              if (quData.value.quType === 1) {
                radioValues.value = an.id
              } else if (quData.value.quType === 2) {
                multiValues.value.push(an.id)
              } else if (quData.value.quType === 3) {
                judgeValues.value = an.id
              }
            }
          })
        });
        visible.value = true;
      }
    }];

    /// 配置
    const columns = [
      {dataIndex: "title", key: "title", title: "题目内容"},
      {dataIndex: "wrongCount", key: "wrongCount", title: "错误次数"},
      {dataIndex: "updateTime", key: "updateTime", title: "更新时间"},
    ];
    /// 工具栏
    const toolbar = [
      {
        label: "错题训练", event: function (record) {
          router.push({
            path:'/book/train',
            query:{
              id:JSON.stringify("toRaw1")
            }
          })
        }
      }
    ];

    /// 分页参数
    const pagination = {pageNum: 1, pageSize: 10}

    /// 外置参数
    const state = reactive({
      params: {
        title: '',
        examId: examId,
      }
    })

    /// 查询参数
    const searchParam = [
      {key: "name", type: "input", label: "题目内容"},
    ]

    /// 选择操作
    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    /// 查询操作
    const search = function (value) {
      state.param = value;
      tableRef.value.reload();
    }


    return {
      state,
      fetch,
      search,
      toolbar,
      columns,
      operate,
      judgeValues,
      pagination,
      quData,
      searchParam,
      onSelectChange,
      tableRef,
      radioValues,
      multiValues,
      analysisCount,
      visible,
      handleOk,
      showModal,
    };
  },
});
</script>
<style scoped>
.qu-analysis-line {
  margin-top: 20px;
  border-bottom: #eee 1px solid
}

</style>
